<div class="modal modal-default fade show" ng-init="getList()">
  <div
    class="modal-dialog modal-lg modal-dialog-centered"
    style="max-width: 95%"
  >
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">
          <i class="mi mi-Media"></i> Media Manager
        </h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <!-- <div class="modal-body" style="height: calc(100vh - 143px);overflow-y: auto;"> -->
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12 mb-3">
            <filter-list
              request="request"
              callback="getList(pageIndex)"
            ></filter-list>
          </div>
        </div>
        <table class="table table-sm table-condensed m-0">
          <thead class="thead-light">
            <tr>
              <th scope="col">Title</th>
              <th scope="col">Image</th>
              <th scope="col" width="5%" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="item in data.items track by $index">
              <td>
                <input
                  type="text"
                  ng-model="item.title"
                  class="form-control form-control-sm"
                />
              </td>
              <td>
                <input
                  type="text"
                  ng-model="item.description"
                  class="form-control form-control-sm"
                />
              </td>
              <td width="15%">
                <div class="input-group input-group-sm">
                  <input
                    id="path-modal-{{$index}}"
                    value="{{item.fullPath}}"
                    onclick="this.select()"
                    class="form-control form-control-sm"
                    readonly="readonly"
                  />
                  <button
                    class="btn btn-outline-secondary btn-clipboard"
                    type="button"
                    data-clipboard-target="#path-modal-{{$index}}"
                  >
                    <i class="mi mi-Copy"></i>
                  </button>
                </div>
              </td>
              <td width="35%">
                <a
                  class=""
                  style="cursor: pointer"
                  ng-click="togglePreview(item)"
                >
                  <img
                    class="rounded"
                    ng-src="{{item.fullPath}}"
                    ng-class="{preview: item.isPreview}"
                  />
                </a>
              </td>
              <td>
                <div
                  class="btn-group btn-group-sm"
                  role="group"
                  aria-label="Actions"
                >
                  <a ng-click="save(item)" class="btn btn-sm btn-dark">
                    <span class="fas fa-check text-info"></span>
                  </a>
                  <a ng-click="remove(item.id)" class="btn btn-sm btn-dark">
                    <span class="fas fa-trash-alt text-danger"></span>
                  </a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <div class="col-md-7">
          <div
            class="col-md-12"
            role="toolbar"
            aria-label="Toolbar with button groups"
          >
            <custom-file
              header="''"
              folder="'Medias'"
              media-file="viewmodel.mediaFile"
              data="viewmodel"
              src-url="viewmodel.mediaFile.fullPath"
              save="save()"
              auto="'false'"
              class=""
            ></custom-file>
          </div>
        </div>
        <paging
          class="small col-md-5"
          page="data.page"
          page-size="data.pageSize"
          total="data.totalItems"
          ul-class="pagination justify-content-end m-0"
          a-class="page-link"
          paging-action="getList(page-1)"
          scroll-top="true"
        >
        </paging>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
